import React, { Component } from 'react';
import { connect } from 'react-redux';
import {login,logout,handleLogin} from '../actions/login'
import md5 from 'crypto-js/md5';

class Login extends Component {
     // 初始化页面常量 绑定事件方法
  constructor(props, context) {
    super(props)
    this.state = {
        login: false,
    }
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(e){
    e.preventDefault();
    var username = e.currentTarget.elements.username.value;
    var password = e.currentTarget.elements.password.value;
    password = md5(password).toString();
    var params = {username,password};
    this.props.handleLogin(params, (response) => {
        if(response){
            this.props.history.push('/');
        }else {
        alert("用户名或密码错误");
        }
      })
   
    
  }

    render() {
        return (
            <div>
                <div className="container" id="login-page-container" style={{marginTop: '-10px'}}>
                        <div className="row">
                            <div className="col-md-6 col-sm-7 hidden-xs login-left-column">
                                <div className="login-left-image" style={{ paddingRight: '50px', textAlign: 'right'}}>
                                <a href="https://www.pantrysbest.com/cities/beijing/categories/disney/products/winnie-the-pooh-cupcake-set">
                                    <img alt="%e5%ae%98%e7%bd%91%e7%99%bb%e5%bd%95%e9%a1%b5%e9%9d%a2%e7%ba%b8%e6%9d%af%e8%9b%8b%e7%b3%95" src="https://www.pantrysbest.com/system/ad_images/pc_images/000/000/005/original/%E5%AE%98%E7%BD%91%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2%E7%BA%B8%E6%9D%AF%E8%9B%8B%E7%B3%95.jpg?1519722861"/>
                                </a>
                                </div>
                            </div>
                            <div className="col-md-5 col-sm-4 col-xs-12 login-container-div" style={{ paddingTop: '10%'}}>
                                <div className="login-text">
                                <form  onSubmit={this.handleSubmit} className="new_user username-login-container" id="new_user" method="post"
                                    style={{display: 'block'}}>
                                    <div style={{display:'none'}}>
                                    <input name="utf8" type="hidden" value="✓"/>
                                    <input name="authenticity_token" type="hidden" value="6LHLtRvWvc1ovuKXm7gMryj8Tt/AWAE6oH8O8zguLVs="/>
                                    </div>
                                    <input id="wx_union_id" name="wx_union_id" type="hidden"/>
                                    <div className="login-div pantry-margin-top-0">
                                    <input autoFocus={true} className="login-input form-input" id="username" name="username" placeholder="输入用户名" 
                                        type="text"/>
                                    </div>
                                    <div className="login-div">
                                    <input  className="login-input form-input" id="password" name="password" placeholder="登录密码" 
                                        type="password"/>
                                    </div>
                                    <div className="login-div col-xs-12 pantry-padding-0px">
                                    <a className="btn sign-up-button weixin_signup weixin_signup_jump btn col-xs-6" href="/users/sign_up" style={{width: '45%',marginRight: 'auto',marginBottom: '0'}}>注册</a>
                                    <input className="btn col-xs-6" id="login-button" style={{width: '45%',float:'right',marginBottom: '0'}}  type="submit"
                                        value="登录"/>
                                    </div>
                                </form>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        );
    }
}


const getValue =state=>{
	return {
        login: state.loginReduce.login,
        username: state.loginReduce.username
  }
}

const LoginContext = connect(getValue,{login,logout,handleLogin})(Login);
export default LoginContext;
